<template>
  <div>
    123
    <h2 class="mb10">Modal 信息提示基本使用</h2>

    <div>
      <h2 class="mb10">Modal 信息提示基本使用</h2>
      <Button class="mr30" @click="showConfirmModal('Some descriptions ...')">提交确认</Button>
      <Button class="mr30" @click="showDeleteModal('Some descriptions ...')">删除确认</Button>
      <Button class="mr30" @click="showInfoModal('Some descriptions ...')">Info</Button>
      <Button class="mr30" @click="showSuccessModal('Some descriptions ...')">Success</Button>
      <Button class="mr30" @click="showErrorModal('Some descriptions ...')">Error</Button>
      <Button class="mr30" @click="showWarnModal('Some descriptions ...')">Warn</Button>
      <Button class="mr30" @click="showFixModal('Some descriptions ...')">高度固定</Button>
      <Modal
        :title="title"
        :content="content"
        :width="416"
        :top="200"
        cancelText="取消"
        okText="确认"
        noticeText="知道了"
        :mode="mode"
        :type="type"
        :center="center"
        :loading="loading"
        @cancel="onCancel"
        @ok="onConfirm"
        :visible="visible"
      />
    </div>

    <!-- <Modal2/> -->
    <button @click="onButtonClick">Show all float windows</button>
    <div v-if="showAll" >
      <Modal2 />
    </div>

  </div>
</template>

<script>

// import { Modal } from './VModel.vue'
// import { Modal2 } from './VModel2.vue'
// import FloatingWindow from './FloatingWindow.vue';

export default {
  name: "modelVue",
  data() {
    return {
      center: true,
      loading: false,
      visible: false,
      title: '',
      content: 'Content of the modal ...',
      mode: 'confirm',
      type: 'delete',

      floatWindows: [ 1, 2, 3, 4 ],
      showAll: false
    }
  },
  components:{
    Modal: ()=>import('./VModel.vue'),
    Modal2: ()=>import('./VModel2.vue')
    
  },

  methods: {
    onButtonClick() {
      this.showAll = !this.showAll;
    },
    showConfirmModal (info) {
      this.mode = 'confirm'
      this.type = 'confirm'
      this.title = 'Do you Want to submit these items ?'
      this.content = info
      this.center = true
      this.visible = true
    },
    showDeleteModal (info) {
      this.mode= 'confirm'
      this.type = 'delete'
      this.title = 'Do you Want to delete these items ?'
      this.content = info
      this.center = true
      this.visible = true
    },
    showInfoModal (info) {
      this.mode = 'info'
      this.type = 'info'
      this.title = 'Do you See these items ?'
      this.content= info
      this.center = true
      this.visible = true
    },
    showSuccessModal (info) {
      this.mode = 'info'
      this.type = 'success'
      this.title = 'Do you See these items ?'
      this.content = info
      this.center = true
      this.visible = true
    },
    showErrorModal (info) {
      this.mode = 'info'
      this.type = 'error'
      this.title = 'Do you See these items ?'
      this.content = info
      this.center = true
      this.visible= true
    },
    showWarnModal (info) {
      this.mode = 'info'
      this.type = 'warn'
      this.title = 'Do you See these items ?'
      this.content = info
      this.center = true
      this.visible = true
    },
    showFixModal (info) {
      this.mode = 'info'
      this.type = 'success'
      this.title = 'Do you See these items ?'
      this.center = false
      this.content = info
      this.visible = true
    },
    onCancel () { // “取消”按钮回调
      this.visible = false
    },
    onConfirm () { // “确定”,“知道了”按钮回调
      this.loading = true // 开启加载状态
      setTimeout(() => {
        this.visible = false
        this.loading = false
      }, 500)
    }
  }

}
</script>

<style>

</style>